<template>
	<div>
		<div class="app-container">
			<TopInfo />
			<Search :lookup="data.lookup" @investigate="inves" />
			<div>
				<el-button v-prmis="'sale_orders_exportGoodsList'" type="primary" @click="getsaorder">{{
					$t('marketing.preferential.exportOrder') }}</el-button>
				<!-- <el-button type="primary" @click="getBrandOrder">{{
					data.saleorder.supplier ?
						'查看全部订单' : '查看品牌方订单' }}</el-button> -->
			</div>
		</div>
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" height="650">
				<el-table-column type="index" width="55" :label="$t('public.No')" />
				<el-table-column prop="order_id" :label="$t('machine.code')" width="80">
					<template #default="scope">
						{{ scope.row.machine_id || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="machine_id" :label="$t('machine.name')" width="140">
					<template #default="scope">
						{{ scope.row.machine_name || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="trade_no" :label="$t('marketing.preferential.orderCode')" width="150" />
				<el-table-column prop="mch_no" :label="$t('order.consume.payNum')" width="150" />
				<el-table-column prop="sku" label="SKU" width="120">
					<template #default="scope">
						{{ scope.row.sku || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="g_name" :label="$t('machine.goods.name')" width="120">
					<template #default="scope">
						{{ scope.row.g_name || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="channel_code" :label="$t('order.consume.slot')">
					<template #default="scope">
						{{ scope.row.channel_code || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="retail_price" :label="$t('order.goods.unitPrice')">
					<template #default="scope">
						{{ scope.row.retail_price || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="discount_price" :label="$t('order.consume.discountAmount')" width="90">
					<template #default="scope">
						{{ scope.row.discount_price || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="total_sod_price" :label="$t('order.consume.payAmount')" width="90">
					<template #default="scope">
						{{ scope.row.total_sod_price || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="out_status" :label="$t('order.goods.shipmentStatus')" width="120">
					<template #default="scope">
						<span v-if="scope.row.out_status == 1">{{ $t('order.goods.pendingPay') }}</span>
						<span v-if="scope.row.out_status == 2">{{ $t('order.goods.shipped') }}</span>
						<span v-if="scope.row.out_status == 3">{{ $t('order.goods.waiting') }}</span>
						<span v-if="scope.row.out_status == 4">{{ $t('message.shipmentSuccess') }}</span>
						<span v-if="scope.row.out_status == 5">{{ $t('message.shipmentFailed') }}</span>
						<span v-if="scope.row.out_status == 6">{{ $t('router.unclaimed') }}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('order.consume.orderStatus')" width="120">
					<template #default="scope">
						<el-tag v-if="scope.row.out_status == 1" type="success">{{ $t('public.normal') }}</el-tag>
						<el-tag v-if="scope.row.out_status == 2" type="warning">{{ $t('order.goods.shipped') }}</el-tag>
						<el-tag v-if="scope.row.out_status == 3" type="warning">{{ $t('order.goods.waiting') }}</el-tag>
						<div v-if="scope.row.out_status == 4">
							<el-tag v-if="scope.row.refund_status == 1" type="success">{{ $t('public.normal')
							}}</el-tag>
							<el-tag v-if="scope.row.refund_status == 2" type="danger">{{ $t('public.refunded') }}{{
								scope.row.refund_amount }}</el-tag>
							<el-tag v-if="scope.row.refund_status == 3" type="warning">{{ $t('public.refundFailed')
							}}</el-tag>
						</div>
						<el-tag v-if="scope.row.out_status == 5" type="danger">{{
							$t('message.shipmentFailed') }}</el-tag>
						<el-tag v-if="scope.row.out_status == 6" type="warning">{{ $t('router.unclaimed') }}</el-tag>
					</template>
				</el-table-column>


				<el-table-column prop="order_type" :label="$t('order.consume.orderType')" width="120">
					<template #default="scope">
						<el-tag
							:type="getPlevel.getPorder(scope.row.order_type) == $t('machine.custom.unknown') ? 'info' : ''">
							{{ $t(getPlevel.getPorder(scope.row.order_type)) }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="pay_type" :label="$t('machine.configs.payType')" width="120">
					<template #default="scope">
						<el-tag
							:type="getPlevel.getPpay(scope.row.pay_type) == $t('machine.custom.unknown') ? 'info' : ''">
							{{ $t(getPlevel.getPpay(scope.row.pay_type)) }}
						</el-tag>
					</template>
				</el-table-column>


				<el-table-column prop="pay_method" :label="$t('order.goods.payMethod')" width="90">
					<template #default="scope">
						{{ $t(getPlevel.getpaymeod(scope.row.pay_method)) }}
					</template>
				</el-table-column>
				<el-table-column prop="pay_time" :label="$t('date.payTime')" width="160">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.pay_time, 3) }}
					</template>
				</el-table-column>
				<el-table-column prop="deliver_pics" :label="$t('order.goods.shipmentImage')" width="90">
					<template #default="scope">
						<el-icon :size="20" @click="getimg(scope.row.deliver_pics)">
							<Picture />
						</el-icon>
					</template>
				</el-table-column>
				<el-table-column prop="transaction_video" :label="$t('order.goods.tradingVideo')">
					<template #default="scope">
						<el-icon :size="20" @click="getvideo(scope.row.transaction_video, scope.row.trade_no)">
							<Film />
						</el-icon>
					</template>
				</el-table-column>

				<el-table-column prop="out_time" :label="$t('date.deliveryTime')" width="160">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.out_time, 3) }}
					</template>
				</el-table-column>
				<el-table-column prop="quantity" :label="$t('order.goods.goodsTotal')">
					<template #default="scope">
						{{ scope.row.quantity }}
					</template>
				</el-table-column>
				<el-table-column prop="success_quantity" :label="$t('order.goods.shipmentsSucces')" width="110">
					<template #default="scope">
						{{ scope.row.success_quantity }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('machine.addMachine.factory')" show-overflow-tooltip width="80">
					<template #default="scope">
						<span v-if="scope.row.factory" class="text-[#409EFF] cursor-pointer">{{ scope.row.factory
						}}</span>
						<span v-else>--</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('machine.addMachine.inventory_location')" show-overflow-tooltip width="80">
					<template #default="scope">
						<span v-if="scope.row.inventory_location" class="text-[#409EFF] cursor-pointer">{{
							scope.row.inventory_location }}</span>
						<span v-else>--</span>
					</template>
				</el-table-column>
			</el-table>
			<PageNum :total="data.total" :page="data.saleorder" @exposeData="current" @fraction="fraction" />
		</div>

		<!-- 出货图像、交易视频 -->
		<el-dialog v-model="data.previewShow"
			:title="data.previewType == 1 ? $t('order.consume.viewPic') : $t('order.consume.viewVideo')" center
			width="700px" destroy-on-close>
			<div v-if="data.previewType == 1" class="flex justify-evenly">
				<div>
					<p class="text-center text-base">{{ $t('order.consume.before') }}</p>
					<el-image class="w-72 h-72" :src="data.orderimg.Before" fit="fill" />
				</div>
				<div>
					<p class="text-center text-base">{{ $t('order.consume.after') }}</p>
					<el-image class="w-72 h-72" :src="data.orderimg.After" fit="fill" />
				</div>
			</div>
			<div v-if="data.previewType == 2">
				<Video :url="data.ordervideo.video" />
			</div>
		</el-dialog>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import { getsaleordersList, getOrderVideo, exportGoodsList } from '@/api/order';
import { useRoute } from "vue-router";
import { onMounted } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { setLastmonth, setThismonth } from '@/utils/index'
import exports from '@/components/export.vue';
const dialogExport = ref(false)
const route = useRoute()
let data = reactive({
	mtloading: false, // 加载
	previewShow: false, // 出货图片、交易视频弹窗
	previewType: 0, // 弹窗类型、1图片，2视频
	lookup: [ // 筛选栏
		{ title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
		{ title: $t('machine.name'), type: 'input', value: '', key: 'machine_name' },
		{ title: $t('machine.goods.name'), type: 'input', value: '', key: 'g_name' },
		{ title: 'SKU', type: 'input', value: '', key: 'sku' },
		{ title: $t('marketing.preferential.orderCode'), type: 'input', value: '', key: 'trade_no' },
		{
			title: $t('order.goods.pay'), type: 'linkage', select: [
				{
					value: '1V', label: $t('order.goods.onlinePay'), children: [
						{ value: '5', label: $t('order.goods.Member') },
						{ value: '6', label: $t('order.goods.LichengPay') },
						{ value: '7', label: $t('order.goods.RobotPay') }
					]
				},
				{
					value: '2V', label: $t('order.goods.offlinePay'), children: [
						{ value: '1', label: $t('order.goods.WeChatPay') },
						{ value: '2', label: $t('order.goods.alipayPay') },
						{ value: '4', label: $t('order.goods.JD') },
						{ value: '8', label: $t('order.goods.Cogolink') }
					]
				}
			], value: '', key: 'pay_type', strictly: true
		},
		{ title: $t('order.goods.payMethod'), type: 'define', select: [], value: '', key: 'pay_method' },
		{ title: $t('order.consume.orderType'), type: 'define', select: [], value: '', key: 'order_type' },
		{ title: $t('date.payTime'), type: 'time', value: [], key: 'create_time' },
		{ title: $t('order.consume.payNum'), type: 'input', value: '', key: 'mch_no' },
		{ title: $t('machine.addMachine.factory'), type: 'input', value: '', key: 'factory' },
		{ title: $t('machine.addMachine.inventory_location'), type: 'input', value: '', key: 'inventory_location' },
	],
	list: [], // 列表信息
	orderimg: { // 出货图片
		Before: '',
		After: ''
	},
	ordervideo: { // 出货视频
		video: '',
	},
	saleorder: { // 筛选数据
		m_id: '',
		machine_name: '',
		g_name: '',
		sku: '',
		pay_type: '',
		pay_method: '',
		order_type: '',
		create_time: '',
		page: 1,
		pageNum: 15,
		supplier: true,
	},
	total: 0, // 总条数
})
onMounted(() => {
	let pay_time = ''
	let dates = [];
	if (route.query.id == '1') {
		let dateTime = new Date().getTime()
		let toDay = getPlevel.gettime(dateTime, 1)
		dates[0] = toDay + ' ' + '00:00:00'
		dates[1] = toDay + ' ' + '23:59:59'
		data.lookup[8].value = dates
		pay_time = toDay + ' ' + '00:00:00' + '~' + toDay + ' ' + '23:59:59'
	}
	if (route.query.id == '2') {
		let today = new Date();
		for (var i = 0; i < 2; i++) {
			// 计算日期差值，向前推算日期
			var diff = new Date(today);
			diff.setDate(today.getDate() - i);
			dates.push(diff);
		}
		let dateTime = dates[dates.length - 1].getTime()
		let yesterDay = getPlevel.gettime(dateTime, 1)
		dates[0] = yesterDay + ' ' + '00:00:00'
		dates[1] = yesterDay + ' ' + '23:59:59'
		data.lookup[8].value = dates
		pay_time = yesterDay + ' ' + '00:00:00' + '~' + yesterDay + ' ' + '23:59:59'
	}
	if (route.query.type == 'gift') {
		data.saleorder.is_gift = 1
	}
	if (!route.query.id) {
		dates[0] = setLastmonth()
		dates[1] = setThismonth()
		data.lookup[8].value = dates
		pay_time = setLastmonth() + ' ' + '00:00:00' + '~' + setThismonth() + ' ' + '23:59:59'
	}

	saleorder(pay_time)
})
// 获取支付方式、支付类型
let getpaytype = () => {
	let pay_method = getPlevel.getpaymeod('', 1)
	let order_type = getPlevel.getPorder('', 1)
	for (let keys in data.lookup) {
		// 支付方式
		if (data.lookup[keys].key == 'pay_method') {
			data.lookup[keys].select = []
			for (let i = 1; i < pay_method.length; i++) {
				data.lookup[keys].select.push(pay_method[i])
			}
		}
		// 订单类型
		if (data.lookup[keys].key == 'order_type') {
			data.lookup[keys].select = []
			for (let i = 1; i < order_type.length; i++) {
				data.lookup[keys].select.push(order_type[i])
			}
		}
	}
}

// 获取列表信息
let saleorder = (e) => {
	if (e) {
		data.saleorder.create_time = e
	}
	data.mtloading = true
	getsaleordersList(data.saleorder).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data.data
			data.total = res.data.data.total
		}
	})
}

// 查看品牌方订单
let getBrandOrder = () => {
	data.saleorder.supplier = !data.saleorder.supplier
	data.saleorder.create_time = ''
	saleorder()
}
// 查询回调
let inves = (e) => {
	console.log(e);
	data.saleorder.is_gift = null
	data.saleorder.create_time = ''
	for (let key in e) {
		if (key != 'create_time') {
			data.saleorder[key] = e[key]
		}
	}

	if (e.create_time != '') {
		data.saleorder.create_time = e.create_time[0] + ' ' + '00:00:00' + '~' + e.create_time[1] + ' ' + '23:59:59'
	}
	if (e.pay_type.length) {
		if (e.pay_type.length == 1) {
			let child: any = []
			getPlevel.order_pay_child.forEach(item => {
				if (item.value == e.pay_type[0]) {
					item.children.forEach(ite => {
						child.push(ite.value)
					})
				}
			})
			data.saleorder.pay_type = child.join(',')
		} else {
			data.saleorder.pay_type = e.pay_type[1]
		}
	}
	data.saleorder.page = 1
	data.saleorder.pageNum = 15
	saleorder('')
}

// 获取出货图像
let getimg = (e) => {
	if (!e || e == '') {
		ElMessage({
			message: $t('message.lackPic'),
			type: 'error'
		})
		return
	}
	let images = e.split(',')
	data.previewType = 1
	data.orderimg.Before = images[0]
	data.orderimg.After = images[1]
	data.previewShow = true
}

// 获取交易视频
let getvideo = (e, k) => {
	if (e) {
		data.ordervideo.video = e
		data.previewType = 2
		data.previewShow = true
	} else {
		getOrderVideo(k).then(res => {
			ElMessage({
				message: res.msg,
				type: 'success'
			})
		})
	}
}

// 导出订单
let getsaorder = () => {
	let obj = {}
	let status = false
	for (let key in data.saleorder) {
		if (key != 'page' && key != 'pageNum') {
			obj[key] = data.saleorder[key]
			if (obj[key] != '') {
				status = true
			}
		}
	}

	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportGoodsList(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				saleorder()
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	}).catch(err => {
		console.log('取消')
	})

}

// 页数回调
let current = (e) => {
	data.saleorder.page = e
	saleorder('')
}

// 条数回调
let fraction = (e) => {
	data.saleorder.pageNum = e
	saleorder('')
}
getpaytype()
</script>
